<template>
  <div class="flvcc bg_fff ptb_10">
    <div class="fl vc type_item type_left" :class="chartType == 0 ? 'bk_d1 bg_d1 ct' : 'bk_e7'" @click="checkChart(0)">
      <img src="@/assets/images/icon_chart.png" class="img16" />
      <span class="dx_14 ml4">{{ text[0] }}</span>
    </div>
    <div class="fl vc type_item type_right" :class="chartType == 1 ? 'bk_d1 bg_d1 ct' : 'bk_e7'" @click="checkChart(1)">
      <img src="@/assets/images/icon_total.png" class="img16" />
      <span class="dx_14 ml4">{{ text[1] }}</span>
    </div>
  </div>
</template>

<script>

export default {
  components: {

  },

  props: {
    text: {
      type: Array,
      default: () => ['每期数据', '累计数据'],
    }
  },
  data() {
    return {
      chartType: 0
    };
  },

  methods: {
    checkChart(val) {
      if (this.chartType != val) {
        this.chartType = val
        this.$emit('changeChart', this.chartType)
      }
    }
  }
};
</script>

<style lang="less" scoped>
.type_container {
  padding: 18px 12px;
}
.ml4 {
  margin-left: 4px;
}
.bk_e7 {
  border: 0.5px solid #e7e7e7;
}
.bk_d1 {
  border: 0.5px solid #D1FB71;
}
.type_item {
  height: 36px;
  padding: 0 10px
}
.type_left {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.type_right {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>
